﻿<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Example :: Quadrant Image Viewer</title>

    <script language="javascript" type="text/javascript" src="JavaScript/jquery-1.10.2.min.js"></script>
    <script language="javascript" type="text/javascript" src="JavaScript/QuadrantImageViewer-1.0.min.js"></script>
    <script language="javascript" type="text/javascript" src="JavaScript/ExampleController.js"></script>
    <link href="Css/Example.css" rel="stylesheet" />
    <link href="Css/Quadrant.css" rel="stylesheet" />
</head>
<body>
    <div class="content">
        <div class="header">
            <div class="navigation-home">Home</div>
            <h1>Museo Nacional</h1>
        </div>
        <div class="main-content">
            <div class="cookie-crum">
                <ul>
                    <li>Welcome &gt;</li>
                    <li>15 Masterpieces</li>
                </ul>
            </div>
            <div class="title">Gaby Maccabi the Tabby</div>
            <div class="work">
                <div class="quadrant" data-controller="Quadrant" data-name="Component" data-image-name="i_s_" data-image-width="800" data-image-height="534" data-thumbnail-name="finder-thumbnail.jpg" data-thumbnail-width="115" data-thumbnail-height="77">
                    <div class="canvas-container">
                        <div class="canvas" data-controller="Quadrant" data-name="Canvas" data-image-folder="Images/Tiles/"></div>
                    </div>
                    <div class="navigator" style="visibility: hidden;" data-controller="Quadrant" data-name="Navigator" data-image-folder="Images/" data-image-name="i_s_" data-image-width="800" data-image-height="534"></div>
                    <div class="controls">
                        <div class="dialog-button" title="View in high resolution" onclick="alert('Popup goes here!');"></div>
                        <div class="zoom-button small selected" title="View small size" data-controller="Quadrant" data-name="ZoomLevel" data-image-name="i_s_" data-image-width="800" data-image-height="534"></div>
                        <div class="zoom-button medium" title="View medium size" data-controller="Quadrant" data-name="ZoomLevel" data-image-name="i_m_" data-image-width="1024" data-image-height="684"></div>
                        <div class="zoom-button large" title="View large size" data-controller="Quadrant" data-name="ZoomLevel" data-image-name="i_l_" data-image-width="2048" data-image-height="1367"></div>
                        <div class="navigator-button" title="Navigator" data-controller="Quadrant" data-name="NavigatorButton"></div>
                    </div>
                </div>
                <div class="ficha">
                    <span>Reference number</span><em>P00749</em>
                    <span>Author</span><em>Eddie Machete</em>
                    <span>Title</span><em style="font-style:italic;">Gaby Maccabi the Tabby</em>
                    <span>Chronology</span><em>2013</em>
                    <span>Technique</span><em>Pixels</em>
                    <span>Support</span><em>Hard Drive</em>
                    <span>Measures</span><em>2048 px x 1367 px</em>
                    <span>School</span><em>Mexican</em>
                    <span>Theme</span><em>Fantastic felines</em>
                    <span>Shown</span><em>Yes</em>
                    <span>Procedence</span><em>Personal Collection</em>
                </div>
            </div>
            <div class="description">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rutrum ac dolor ac dictum. Suspendisse tincidunt vehicula magna, sed tempus tortor egestas ut. Curabitur imperdiet lorem a aliquet hendrerit. Mauris malesuada metus sed lectus aliquam, in vulputate lacus tempus. Quisque bibendum, purus ut ullamcorper egestas, neque quam commodo est, sit amet lacinia sem augue sed risus. Donec erat nisl, congue nec dui nec, rutrum bibendum turpis. Aliquam pharetra laoreet metus vitae fringilla.</p>
                <p>Ut nisl massa, sodales in orci non, euismod suscipit magna. Fusce nec erat sit amet felis egestas pharetra id in lectus. Sed in nibh semper, tempor ligula in, tristique lorem. Praesent cursus eleifend consectetur. Donec quis varius sapien, in ultricies purus. Sed lorem sapien, blandit in ornare accumsan, facilisis eget neque. Mauris laoreet non est sed bibendum. Nunc pulvinar justo ac luctus consectetur.</p>
                <p>Cras dolor lorem, semper ut tempus non, ornare consectetur nibh. Integer sagittis neque nec commodo ultricies. Curabitur mollis nunc quis dignissim blandit. Vestibulum ac ante hendrerit, cursus nunc et, tristique libero. Vestibulum in porttitor urna. Nullam consectetur sem ut diam dictum, vel auctor dui aliquam. Mauris nec laoreet turpis, at vulputate mauris. Phasellus a laoreet enim. Cras sed elit cursus, adipiscing mauris vel, dignissim tortor. Ut magna velit, sodales sit amet vulputate sed, sollicitudin ac nisl.</p>
                <p>Maecenas eget eleifend nisi. Integer dui massa, semper tristique leo sed, vestibulum sollicitudin massa. Cras ultrices, elit gravida commodo facilisis, velit justo ornare nunc, a suscipit nisi eros a nunc. Vestibulum ullamcorper nibh a purus pellentesque, vel egestas augue interdum. Vivamus at pharetra arcu.</p>
            </div>
            <div class="location">
                Sala 39
                <span>Location on the map</span>
            </div>
        </div>
        <div class="footer">
            This page was created to demonstrate a possible real world application for Quadrant Image Viewer
            <ul>
                <li>Legal information |</li>
                <li>Privacy policy |</li>
                <li>Accesibility |</li>
                <li>Web map</li>
            </ul>
        </div>
    </div>
</body>
</html>